<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>纯DOM法</title>
    </head>

    <body>
        <ul id="list"></ul>
        <script>
            let arr = [
                { name: "小明", age: 12, sex: "男" },
                { name: "小红", age: 11, sex: "女" },
                { name: "小强", age: 13, sex: "男" },
            ];

            let list = document.getElementById("list");

            for (let i = 0; i < arr.length; i++) {
                let li = document.createElement("li");
                let hdDiv = document.createElement("div");
                hdDiv.className = "hd";
                hdDiv.innerText = arr[i].name + "的基本信息";

                let bdDiv = document.createElement("div");
                bdDiv.className = "bd";

                let p1 = document.createElement("p");
                p1.innerText = "姓名：" + arr[i].name;
                bdDiv.appendChild(p1);
                let p2 = document.createElement("p");
                p2.innerText = "年龄：" + arr[i].age;
                bdDiv.appendChild(p2);
                let p3 = document.createElement("p");
                p3.innerText = "性别：" + arr[i].sex;
                bdDiv.appendChild(p3);

                li.appendChild(hdDiv);
                li.appendChild(bdDiv);
                list.appendChild(li);
            }
        </script>
    </body>
</html>
